<!--
  功能：
  作者：parker
  邮箱：geekpark@icloud.com
  微信：wzb10746
  时间：2023年08月17日 11:07:47
  版本：
  文件: src/pages/tabbar/message.vue
-->

<script setup>
import { ref, getCurrentInstance, onBeforeMount, reactive, toRefs, computed, nextTick  } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { formatTimestamp } from '@/utils'

const r = ref()
const mainData = reactive({
  chats: [],
  findFriendsList: []
})
onLoad(async () => { 
  const { proxy } = getCurrentInstance()
  const [
		{ code: cCode, data: { chats } = {} },
		{ code: fCode, data: findFriendsList}
	] = await Promise.all([
		proxy.$http.getMessageChatList(),
		proxy.$http.getMessageFriendsList()
  ])
  if (cCode === 0) {
    mainData.chats = chats
  }
  if (fCode === 0) {
    mainData.findFriendsList = findFriendsList
  }
})

const { chats, findFriendsList } = toRefs(mainData)
  
</script>

<template>
<view>
    <!-- 头部 -->
    <view class="u-flex u-flex-between ms-header">
      <view class="u-flex u-flex-column u-flex-middle">
        <view class="ms-header-iconWrap">
         <i class="ri-heart-3-fill ri-2x icon icon-1"  :style="{ color:'#FD5E5B' }"></i>
        </view>
        <p class="ms-header-iconLabel">赞和收藏</p>
      </view>
         <view class="u-flex u-flex-column u-flex-middle">
        <view class="ms-header-iconWrap ms-header-iconWrap-1">
         <i class="ri-user-fill ri-2x"  :style="{ color:'#3686FF' }"></i>
        </view>
        <p class="ms-header-iconLabel">新增关注</p>
      </view>
         <view class="u-flex u-flex-column u-flex-middle">
        <view class="ms-header-iconWrap ms-header-iconWrap-2">
         <i class="ri-message-3-fill ri-2x"  :style="{ color:'#33DA98' }"></i>
        </view>
        <p class="ms-header-iconLabel">评论和@</p>
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="u-m-t-30 ms-message-list">
      <view v-for="item in chats" :key="item.chat_user_id" class="u-flex ms-message-list-item">
        <u-avatar size="46" :src="item.info.avatar" />
        <view class="u-m-l-20 ms-message-list-item-content">
          <p class=" u-flex u-flex-between u-flex-1 ms-message-list-item-content-title"> 
            <view class="u-line-1">{{ item.info.userName }}</view>
            <span class="ms-message-list-item-content-time">{{ formatTimestamp(item.last_msg_time) }}</span>
          </p>
          <p class="u-line-1 u-m-t-5 ms-message-list-item-content-msg">
             {{ item.last_msg_content }}
          </p>
        </view>
      </view>
    </view>

    <!-- 发现好友 -->
    <view class="u-m-t-30 ">
      <view class="u-flex u-flex-between">
        <view class="u-flex u-flex-middle u-m-l-20">
          <p>发现好友</p>
          <i class="ri-information-line" :style="{color:'#999'}"></i>
        </view>
      </view>

      <view>
        <view v-for="person in findFriendsList" :key="person.id" class="u-flex u-flex-between u-m-30">
          <u-avatar :src="person.image" size="46"/>
          <view class="u-flex-fill u-m-l-20">
            <h4>{{ person.nickname }}</h4>
            <p class="u-m-t-10">{{ person.desc }}</p>
          </view>
          <view class="u-flex u-flex-middle">
            <up-button type="error" :plain="true" text="关注" shape="circle" size="mini"></up-button>
            <i class="ri-close-line u-m-l-15" :style="{color:'#999'}"></i>
          </view>
        </view>
      </view>

    </view>
</view>
</template>

<style lang="scss" scoped>
  .ms{
    &-header{
      padding: 30upx 74upx;
      &-iconWrap{
        background-color: #FEE2E2;
        width: 98upx;
        height: 98upx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 36upx;
        position: relative;
        &-1{
          background-color: #E7F0FF;
        }
        &-2{
          background-color: #E7FBF3;
        }
      }
      &-iconLabel{
        font-size: $uni-font-size-base;
        color: #333;
        margin-top: 15upx;
        font-weight: 500;
      }
    }

    &-message-list{
      &-item{
        padding: 20upx 30upx;
        &-content{
          &-title{
            font-size: $uni-font-size-lg;
            color:$uni-text-color;
            font-weight: 500;
          }
          &-time{
            color:$uni-text-color-grey;
            font-size:  $uni-font-size-sm;
            font-weight: normal;
          }
          &-msg{
             color:$uni-text-color-grey;
            font-size:  $uni-font-size-base;
          }
        }
      }
    }
  }

</style>

<!--
文件版权号：cbee7221-ffef-4da2-8a31-561af7c45108
-->
